<template>
  <div class="app-container">
    <div class="search">
      <el-form
        ref="queryForm"
        class="queryForm"
        :inline="true"
        :model="formInline"
        label-width="auto"
      >
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item
              label="标签名称"
              class="formItem"
            >
              <el-input
                v-model="formInline.signName"
                placeholder="请输入标签名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="标签性质"
              class="formItem"
            >
              <el-select
                v-model="formInline.signNature"
                placeholder="请选择标签性质"
                clearable
                class="w100"
              >
                <el-option
                  v-for="(item, index) in signNatureOption"
                  :label="item.label"
                  :value="item.label"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="标签状态"
              class="formItem"
            >
              <el-select
                v-model="formInline.status"
                placeholder="请选择标签状态"
                clearable
                class="w100"
              >
                <el-option
                  v-for="(Labe_status, index) in LabeStatusOption"
                  :label="Labe_status.label"
                  :value="Labe_status.value"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="handleSearchList"
              >搜索</el-button>
              <el-button
                size="small"
                icon="el-icon-refresh"
                @click="handleReset"
              >清空</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="list">
        <el-button
          type="primary"
          class="add"
          size="small"
          icon="el-icon-plus"
          @click="editMailbox"
        >新增</el-button>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#eff7fd' }"
          ref="table"
          highlight-current-row
          v-loading="loading"
        >
          <!-- <el-table-column
            label="序号"
            type="index"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
              <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column> -->
          <el-table-column
            label="序号"
            prop="sort"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            label="标签名称"
            prop="signName"
            align="center"
          ></el-table-column>
          <el-table-column
            label="标签性质"
            prop="signNature"
            align="center"
          ></el-table-column>
          <el-table-column
            label="标签内容"
            prop="signContent"
            align="center"
          ></el-table-column>
          <el-table-column
            label="标签状态"
            prop="status"
            align="center"
            :formatter="typeFormatter"
          >
            <!-- <template slot-scope="scope">
                        <span v-if="scope.row.status == '0'">已启用</span>
                        <span v-else>已禁用</span>
                    </template> -->
          </el-table-column>
          <el-table-column
            label="创建时间"
            prop="createTime"
            align="center"
          ></el-table-column>
          <!-- :formatter="typeFormatterSign" -->
          <el-table-column
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click.stop="handleUpdate(scope.row, 'check')"
              >查看</el-button>
              <el-button
                size="mini"
                type="text"
                @click.stop="handleUpdate(scope.row, 'edit')"
              >编辑</el-button>
              <el-button
                size="mini"
                type="text"
                @click.stop="handleUpdate(scope.row, 'forbidden')"
              >{{scope.row.status == 0 ? '禁用' : '启用'}}</el-button>
              <el-button
                size="mini"
                type="text"
                @click.stop="handleDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @size-change="sizeChange"
            @current-change="pageChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    
    <el-dialog
      :title="title"
      :visible.sync="showFlag"
      width="40%"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
    >
      <el-form
        ref="editForm"
        :rules="rule"
        :model="editForm"
        :inline="true"
        label-width="100px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="标签名称"
              prop="signName"
              class="formItem"
            >
              <el-input
                v-model="editForm.signName"
                placeholder="请输入标签名称"
                clearable
                class="w100"
                :disabled="title == '查看标签'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item prop="sort" label="标签序号" class="formItem">
                  <el-input-number v-model="editForm.sort" :disabled="title == '查看标签'" class="w100" controls-position="right"  :min="1"></el-input-number>
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              prop="signNature"
              label="标签性质"
              class="formItem"
            >
              <el-select
                style="width: 100%;"
                v-model="editForm.signNature"
                placeholder="请选择标签性质"
                :disabled="title == '查看标签'"
                class="w100"
              >
                <el-option
                  v-for="(dict, index) in signNatureOption"
                  :label="dict.label"
                  :value="dict.label"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="标签内容"
              prop="signContent"
              class="formItem"
            >
              <el-input
                v-model="editForm.signContent"
                placeholder="请输入标签内容"
                clearable
                class="w100"
                :disabled="title == '查看标签'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="标签SQL"
              prop="sginSql"
              class="formItem"
            >
              <el-input
                v-model="editForm.sginSql"
                type="textarea"
                placeholder="请输入标签SQL"
                class="w100"
                clearable
                :disabled="title == '查看标签'"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="handleSubmit"
        >保存</el-button>
        <el-button
          type="primary"
          @click="handleEditReset"
        >重置</el-button>
        <el-button
          type="primary"
          @click="showFlag = false"
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getselectSign,
  addSign,
  updateSign,
  delSign,
} from '@/api/labelManage.js'
import { getField } from '@/api/user.js'
import { Encrypt } from '@/api/cryptoAES.js'
export default {
  data() {
    return {
      // 搜索表单
      formInline: {
        signName: '', // 标签名称
        signNature: '', // 标签性质
        status: '', //标签状态
      },
      tableData: [],
      loading: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      // 标签状态
      LabeStatusOption: [
        { label: '已启用', value: 0 },
        { label: '已禁用', value: 1 },
      ],
      //标签性质
      signNatureOption: [
        { label: '中性标签', value: '0' },
        { label: '正向标签', value: '1' },
        { label: '负向标签', value: '2' },
      ],
      //弹框
      title: '',
      showFlag: false,
      editForm: {},
      rule: {
        signName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' },
        ],
        sort: [
          { required: true, message: '请输入标签序号', trigger: 'change' },
        ],
        signNature: [
          { required: true, message: '请选择标签性质', trigger: 'change' },
        ],
        status: [
          { required: true, message: '请选择标签类型', trigger: 'change' },
        ],
        signContent: [
          { required: true, message: '请输入标签内容', trigger: 'blur' },
        ],
        sginSql: [
          { required: true, message: '请输入标签SQL', trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    let params = {
      page: 1,
      size: 100,
      code: 'indicator_type',
    }
    getField(params).then((res) => {
      if (res.status) {
      }
    })
    this.handleSearchList()
  },
  methods: {
    //搜索
    handleSearch() {
      let formLine = this.formInline
      let params = {
        ...formLine,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        // TYSHXYDM: ''
      }
      getselectSign(params).then((res) => {
        this.tableData = res.data.records
        this.total = Number(res.data.total)
      })
    },
    sizeChange(val) {
      this.pageSize = val
      this.handleSearch()
    },
    pageChange(val) {
      this.pageNum = val
      this.handleSearch()
    },
    //新增
    editMailbox() {
      this.showFlag = true
      this.title = '新增标签'
      this.editForm = {
        sort:1
      }
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
      })
    },
    //编辑
    handleUpdate(row, type) {
      console.log(row)
      if ((this.title = type == 'forbidden')) {
        if (row.status == 0) {
          this.$confirm('确定禁用此标签?', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            updateSign({ id: row.id, status: 1 }).then((res) => {
              if (res.status) {
                this.$message({
                  type: 'success',
                  message: '禁用成功!',
                })
                this.handleSearch()
              }
            })
          })
        } else {
          this.$confirm('确定启用此标签?', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            updateSign({ id: row.id, status: 0 }).then((res) => {
              if (res.status) {
                this.$message({
                  type: 'success',
                  message: '启用成功!',
                })
                this.handleSearch()
              }
            })
          })
        }
      } else {
        this.showFlag = true
        this.title = type == 'check' ? '查看标签' : '编辑标签'
        this.editForm = { ...row }
        this.editForm.sginSql = row.sginSql.includes('&gt;')
          ? row.sginSql.replace(/&gt;/g, '>')
          : row.sginSql.includes('&lt;')
          ? row.sginSql.replace(/&lt;/g, '<')
          : row.sginSql
      }
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
      })
    },
    //保存
    handleSubmit() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          let form = this.editForm
          let params = {
            sginSql: form.sginSql,
            indicatorName: form.indicatorName,
            signName: form.signName,
            sort:form.sort,
            status: form.status,
            signContent: form.signContent,
            signNature: form.signNature,
          }
          console.log(params, 'params')
          // signContent: Encrypt(form.signContent),
          if (this.title == '新增标签') {
            addSign(params).then((res) => {
              if (res.status) {
                this.showFlag = false
                this.$message({
                  type: 'success',
                  message: '操作成功!',
                })
                this.handleSearch()
              } else {
                this.$message({
                  type: 'error',
                  message: res.msg,
                  duration:5000
                })
              }
            })
          } else if (this.title == '编辑标签') {
            ;(params.id = form.id),
              updateSign(params).then((res) => {
                if (res.status) {
                  this.showFlag = false
                  this.$message({
                    type: 'success',
                    message: '操作成功!',
                  })
                  this.handleSearch()
                } else {
                  this.$message({
                    type: 'error',
                    message: res.msg,
                    duration:5000
                  })
                }
              })
          }
        }
      })
    },
    handleSearchList() {
      this.pageNum = 1
      this.pageSize = 10
      this.handleSearch()
    },
    //清空
    handleReset() {
      this.pageNum = 1
      this.pageSize = 10
      this.formInline = {}
      this.handleSearch()
    },
    //重置
    handleEditReset(){
      let form = this.editForm
      this.editForm = { 
        ...form,
        sginSql: '',
        signName: '',
        sort:1,
        signContent: '',
        signNature: '',
      }
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
      })
    },
    //删除
    handleDelete(row) {
      this.$confirm('确定删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        delSign({ id: row.id }).then((res) => {
          if (res.status) {
            this.$message({
              type: 'success',
              message: '删除成功!',
            })
            this.handleSearch()
          }
        })
      })
    },
    typeFormatter(r, c, v, i) {
      let list = this.LabeStatusOption.filter((item) => item.value == v)
      return list.length > 0 ? list[0].label : v
    },
    //   typeFormatterSign(r,c,v,i){
    //     let list = this.signNature.filter(item=>item.value == v);
    //     return list.length>0?list[0].label:v;
    //   },
    //DES加密
    encryptByDES(message, key) {
      var keyHex = CryptoJS.enc.Utf8.parse(key)
      var encrypted = CryptoJS.DES.encrypt(message, keyHex, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7,
      })
      return encrypted.ciphertext.toString()
    },
  },
}
</script>

<style scoped lang="scss">
.search {
  padding: 20px 0 20px 20px;
  background: #fff;
}

.list {
  .add {
    margin-bottom: 10px;
  }
}

.formItem {
  width: 100%;

  /deep/.el-form-item__content {
    width: calc(100% - 125px);

    /deep/.el-select,
    /deep/.el-cascader {
      width: 100%;
    }

    .w100 {
      width: 100% !important;
    }
  }
}

.pagination {
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.dialog-footer {
  text-align: center;
}
</style>